<template>
  <div class="login-box">
    <span class="title">登录</span>
    <div class="login-label">
      <span>账号:</span>
      <input type="text" placeholder="user" v-model="username">
    </div>
    <div class="login-label">
      <span>密码:</span>
      <input type="text" placeholder="admin" v-model="password">
    </div>
    <div>
      <button type="button" class="btn" @click="login">登录</button>
      <span class="forget-pwd">
        <router-link to="/register">去注册</router-link>
      </span>
    </div>
  </div>
</template>

<script>
import { ljmAjax, POST } from "@/api/index";
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    login() {
      const params = {
        username: this.username,
        password: this.password
      };
      POST("api/login/login", params).then(res => {
        console.log(res.data);
        const data = res.data;
        if (data.code == 1) {
            this.$message({
          message: data.msg,
          type: 'success'
        });
          this.$store.commit('LJM_LOGIN',data.data)
          // sessionStorage.setItem('ljm_login_session',JSON.stringify(data.data))
          this.$store.commit('SETLOGIN',true)
          this.$router.push("/index");
        } else {
          this.$store.commit('SETLOGIN',false)
          this.$store.commit('LJM_LOGIN',{})
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login-box {
  width: 600px;
  //   height: 500px;
  display: flex;
  flex-direction: column;
  margin: 40px auto;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 30px 0;
  .forget-pwd {
    a {
      font: 400 12px/30px "microsoft yahei";
      color: #ccc;
    }
  }
  .title {
    font: 400 20px/30px "microsoft yahei";
    margin-bottom: 30px;
  }
  .login-label {
    width: 300px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    span {
      width: 60px;
    }
    input {
      width: 100%;
      outline: none;
      background: none;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 5px 10px;
      font: 400 13px/20px "microsoft yahei";
    }
  }
}
</style>